<template>
  <div class="dividing-step"></div>
  <Coupon />
  <div class="first-step">
    <div class="first-step-top">
      <div
        :class="['button', 'thumb', activitName === 0 ? 'sel' : 'nosel']"
        @click="() => (activitName = 0)"
      >
        DIY个性定制
        <div class="line" v-show="activitName === 0"></div>
      </div>
      <div
        :class="['button', 'thumb', activitName === 1 ? 'sel' : 'nosel']"
        @click="() => (activitName = 1)"
      >
        固化款
        <div class="line" v-show="activitName === 1"></div>
      </div>
      <div
        :class="['button', 'thumb', activitName === 2 ? 'sel' : 'nosel']"
        @click="() => (activitName = 2)"
      >
        团单款
        <div class="line" v-show="activitName === 2"></div>
      </div>
    </div>
    <div class="dividing"></div>

    <div class="selection">
      <div class="selection-part">
        <div class="title first-line">品类选择</div>
        <div class="selection-right">
          <div
            :class="[
              'selection-right-part',
              'thumb',
              selectionNum === item.category_id
                ? `selection-sel`
                : `selection-nosel`,
            ]"
            v-for="item in selection"
            @click="() => (selectionNum = item.category_id)"
          >
            <div v-show="selectionNum === item.category_id" class="frame">
              <img :src="publicUrl(`/images/yes.png`)" />
            </div>
            <div>{{ item.title }}</div>
            <div>款号：{{ item.style_number }}</div>
          </div>
        </div>
      </div>
      <div class="selection-part">
        <div class="title">面料选择</div>
        <div class="fabric-right">
          <div class="button thumb" @click="() => open('factory')">
            工厂面料
          </div>
          <div class="button thumb" @click="() => open('platform')">
            平台面料
          </div>
          <div class="button thumb" @click="() => open('supply')">
            客供面料
          </div>
        </div>
      </div>
      <div class="selection-part">
        <div class="title">所选面料</div>
        <div class="right-sel">
          <div class="left">{{ clickFabric }}{{ fabricItem.serial }}</div>
          <div class="right">
            <!-- <div class="customize">件数：2件</div> -->
            <div class="button thumb" @click="() => open(undefined)">
              重新选择
            </div>
          </div>
        </div>
      </div>
      <div class="selection-part">
        <div class="title">定制件数</div>
        <div class="right-sel">
          <div class="right">
            <!-- <div class="icon thumb"><img :src="publicUrl(`/images/step-reduce.png`)" /></div>
               <div class="num">{{buyNum}}</div>
               <div class="icon thumb"><img :src="publicUrl(`/images/step-add.png`)" /></div> -->
            <Counter v-model:value="buyNum" :step="1" :min="1" :max="99" />
          </div>
        </div>
      </div>
    </div>

    <div class="dividing" style="margin-top: 0.1406rem"></div>
    <div class="first-button">
      <div class="button thumb" @click="stepChange">进入款式设计</div>
    </div>
  </div>
  <Second
    ref="second"
    v-model:visible="secondShow"
    :defFabricId="fabricItem.fabric_id"
    :fabric-item="fabricData"
    @choose="choose"
  />
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import { ref } from "vue";
import fabricData from "@/json/fabricItem.json";
import Second from "../Second/index.vue";
import { FabricItem } from "@/components/MakeFabric/interface";
import Coupon from "./components/CouponShop/index.vue";
import Counter from "@/components/Counter/index.vue";
import { useRoute } from "vue-router";

const second = ref<InstanceType<typeof Second>>();

const selectionNum = ref<number>(1);
const buyNum = ref<number>(1);

const route = useRoute();

const getAct = (): number => {
  switch (route.query.act) {
    case "0":
      return 0;
    case "1":
      return 1;
    case "2":
      return 2;
    default:
      return 0;
  }
};

const activitName = ref<number>(getAct());

const clickFabric = ref<string>("工厂面料");
const fabricItem = ref<FabricItem>(
  fabricData[0]
    ? fabricData[0]
    : {
        fabric_id: 0,
        img: "",
        serial: "",
        type: "",
        makeup: "",
        color: "",
        elastic: "",
        place: "",
        season: "",
        price: 0,
      }
);
interface Category {
  title: string;
  category_id: number;
  style_number: string;
}
const selection = ref<Array<Category>>([
  {
    title: `意式男西裤`,
    style_number: `3656565`,
    category_id: 1,
  },
  {
    title: `男衬衫短袖`,
    style_number: `3656566`,
    category_id: 2,
  },
  {
    title: `女衬衫短袖`,
    style_number: `3656567`,
    category_id: 3,
  },
]);
const emits = defineEmits<{
  (event: "stepChange", step: number, fourChange?: "group" | "normal"): void;
}>();
const secondShow = ref<boolean>(false);

const open = (key: "factory" | "platform" | "supply" | undefined = undefined) => {
  if(key)second.value?.initData(key);
  secondShow.value = true;
};

const choose = (item: FabricItem,title:string) => {
  //选择
  fabricItem.value = item;
  clickFabric.value = title;
  // console.log(fabricItem.value);
};

const stepChange = () => {
  emits("stepChange", 2, activitName.value === 2 ? "group" : "normal");
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
